<template>
  <div class="content_left_sqfwqk">
    <titleBox text="居民小区" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 10px 10px;border: 1px solid #11afc180;">
        <div v-if="info" class="topBox">
          <div class="lxbox" style="margin: 25px 0 0 0" @click="showXqModal">
            <div style="font-size: 9px">小区总数</div>
            <div style="font-size: 10px; margin-top: 2px">
              <span style="font-size: 14px; margin-right: 2px">{{ info.community_total }}</span>个
            </div>
          </div>
          <div class="lxbox" style="margin: -25px 0 0 -40px">
            <div style="font-size: 9px">楼栋总数</div>
            <div style="font-size: 10px; margin-top: 2px">
              <span style="font-size: 14px; margin-right: 2px">{{ info.building_total }}</span>栋
            </div>
          </div>
          <div class="lxbox" style="margin: 25px 0 0 -40px">
            <div style="font-size: 9px">入住率</div>
            <div style="font-size: 10px; margin-top: 2px">
              <span style="font-size: 12px; margin-right: 2px">{{ info.occupancy_rate.toFixed(0) }}%</span>
            </div>
          </div>
          <div class="lxbox" style="margin: -25px 0 0 -40px">
            <div style="font-size: 9px">在建小区</div>
            <div style="font-size: 10px; margin-top: 2px">
              <span style="font-size: 14px; margin-right: 2px">{{ info.under_construction }}</span>个
            </div>
          </div>
        </div>


        <mTableAuto :titleData="titleData" :valueData="list" @click-btn="rowClick"></mTableAuto>
      </div>

    </div>
    <xqModal ref="xqModalRef"></xqModal>
  </div>
</template>
<script setup>
import { onMounted, ref, nextTick } from "vue"
import $api from "@/utils/request.js"
import titleBox from "../mConponents/titleBox.vue"
import mTableAuto from "../mConponents/mTableAuto.vue"
import xqModal from "../mConponents/modal/xqModal.vue"

const xqModalRef = ref(null)
const content = ref(null)
const height = ref(0)
const show = ref(false)

const showXqModal = () => {
  xqModalRef.value.show()
}

const closeXqModal = () => {
  xqModalRef.value.close()
}


onMounted(() => {
  getData()
  getInfo()
})

const titleData = [
  {
    name: "小区名称",
    key: "name",
    align: true,
    style: {
      flex: 1,
      textAlign: "left"
    }
  },
  {
    name: "建筑面积",
    key: "area",
    align: true,
    style: {
      width: "50px"
    }
  },
  {
    name: "入住户数",
    key: "rzhs",
    align: true,
    style: {
      width: "50px"
    }
  },
  {
    name: "物业公司",
    key: "wuye",
    align: true,
    style: {
      width: "70px"
    }
  },
  {
    name: "物业负责人",
    key: "contact",
    align: true,
    style: {
      width: "50px"
    }
  }
]
const info = ref(null)
const getInfo = async () => {
  const res = await $api.get("/api/Screen/CommunityBuilding")
  if (res.code === 1) {
    console.log(res)
    info.value = res.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}
const list = ref([])
const getData = async () => {
  const res = await $api.get("/api/index/getHouseList")
  if (res.code === 1) {
    res.data.forEach(e => {
      res.data.createtime = formateDate(e.createtime)
    })
    list.value = res.data
  }
}
const formateDate = (timestamp) => {
  const date = new Date(timestamp)
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, "0")
  const day = String(date.getDate()).padStart(2, "0")
  return `${year}-${month}-${day}`
}
defineExpose({ showXqModal, closeXqModal })
</script>
<style scoped lang="less">
.content_left_sqfwqk {
  margin-top: 5px;

  .content {
    // background-image: url("/img/myimg/lxgzbg.png");
    // background-repeat: no-repeat;
    // background-size: 300px 120px;
    // background-position: 15px 30px;

    background-color: #001a1dcc;
    width: 330px;
    border-radius: 5px;
    margin-top: 5px;

    // display: flex;
    // align-items: center;
    // justify-content: center;

  }

  .topBox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 330px;
    height: 120px;

    .lxbox {
      flex-direction: column;
      display: flex;
      align-items: center;
      justify-content: center;
      background-image: url("/img/myimg/lx.png");
      background-size: 110px 100px;
      width: 110px;
      height: 100px;
    }
  }
}
</style>
